<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  react核心库  -->
    <script src="lib/react.development.js"></script>
    <!--  reactdom:操作DOM  -->
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<!--指定挂载的位置-->
<div id="root"></div>
</body>
<script type="text/babel">
    // 创建一个React容器
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    {
        // 1- 声明状态1
        // class App extends React.Component{
        //     constructor(props) {
        //         super(props);
        //         this.state = {
        //             num:1
        //         }
        //     }
        //     render(){
        //         return (
        //             <div>
        //                 <button onClick={()=>{
        //                     // 修改状态的唯一正途是通过this.setState方法
        //                     this.setState({
        //                         num:this.state.num+1
        //                     })
        //                 }}>{this.state.num}</button>
        //             </div>
        //         )
        //     }
        // }
        // root.render(<App/>)
    }
    {
        // 2
        class App extends React.Component{
            state = {
                num:0
            }
            render(){
                return (
                    <div>
                        <button onClick={()=>{
                            // 修改状态的唯一正途是通过this.setState方法
                            this.setState({
                                num:this.state.num+1
                            })
                        }}>{this.state.num}</button>
                    </div>
                )
            }
        }
        root.render(<App/>)
    }
</script>
</html>